<!--  -->
<template>
  <div class="content">
    <wx-table
      :listDate="dateList"
      :listCount="dataCount"
      v-bind="contenTableConfig"
      @SelectionChange="SelectionChange"
      v-model:page="pageInfo"
      @updatePage="updatePage"
    >
      <!-- header中的插槽 -->
      <template #headerHandler>
        <el-button type="primary" @click="handleNewClick">新建用户</el-button>
      </template>
      <!-- 列表中的插槽 -->
      <template #status="scope">
        <el-button
          size="mini"
          :type="scope.row.enable ? 'success' : 'danger'"
          plain
          >{{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #createAt="scope">
        <span>{{ $filters.formatTime(scope.row.createAt) }} </span>
      </template>
      <template #updateAt="scope">
        <span>{{ $filters.formatTime(scope.row.updateAt) }} </span>
      </template>
      <template #handle="scope">
        <div class="handle-btns">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            plain
            v-if="isUpdate"
            @click="handleEditClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            v-if="isDelete"
            @click="hanldleDeleteClick(scope.row)"
            >删除</el-button
          >
        </div>
      </template>
      <!-- 动态插槽 -->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </wx-table>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
import wxTable from '../../../base-ui/table/index'
import { usePermission } from '../../../hooks/usePermission'
export default defineComponent({
  props: {
    contenTableConfig: {
      type: Object,
      require: true
    },
    pageName: {
      type: String,
      require: true
    }
  },
  components: {
    wxTable
  },
  emits: [
    'SelectionChange',
    'handleNewUser',
    'handleRefresh',
    'handleNewClick',
    'handleEditClick'
  ],
  setup(props, { emit }) {
    const store = useStore()
    // 获取用户权限
    const isCreate = usePermission(props.pageName, 'create')
    const isUpdate = usePermission(props.pageName, 'update')
    const isDelete = usePermission(props.pageName, 'delete')
    const isQuery = usePermission(props.pageName, 'query')

    const pageInfo = ref({ currentPage: 0, pageSize: 10 })
    const getPageData = (info) => {
      if (!isQuery) return
      store.dispatch('system/getPageListAction', {
        pageName: props.pageName,
        queryInfo: {
          offset: pageInfo.value.currentPage,
          size: pageInfo.value.pageSize,
          ...info
        }
      })
    }
    getPageData() //加载时先请求一次全部数据
    // 从vuex中获取数据
    // 列表数据
    const dateList = computed(() =>
      store.getters[`system/pageListData`](props.pageName)
    )
    // 列表数量
    const dataCount = computed(() =>
      store.getters[`system/pageListCount`](props.pageName)
    )

    const SelectionChange = (value) => {
      emit('SelectionChange', value)
    }
    const handleNewUser = () => {
      emit('handleNewUser')
    }
    const handleRefresh = () => {
      emit('handleRefresh')
    }
    const updatePage = (page) => {
      console.log(page)
      pageInfo.value.currentPage = page.currentPage
      pageInfo.value.pageSize = page.pageSize
      getPageData()
    }
    const otherPropSlots = props.contenTableConfig.propList.filter((item) => {
      if (item.slotName === 'status') return false
      if (item.slotName === 'createAt') return false
      if (item.slotName === 'updateAt') return false
      if (item.slotName === 'handle') return false
      return true
    })

    // 删除
    const hanldleDeleteClick = (item) => {
      store.dispatch('system/deletePageDataAction', {
        pageName: props.pageName,
        id: item.id
      })
    }
    // 新建
    const handleNewClick = () => {
      emit('handleNewClick')
    }
    // 编辑
    const handleEditClick = (item) => {
      emit('handleEditClick', item)
    }
    return {
      dateList,
      dataCount,
      SelectionChange,
      handleNewUser,
      handleRefresh,
      getPageData,
      pageInfo,
      updatePage,
      otherPropSlots,
      // 权限
      isCreate,
      isUpdate,
      isDelete,
      //删除
      hanldleDeleteClick,
      // 新建
      handleNewClick,
      // 编辑
      handleEditClick
    }
  }
})
</script>
<style lang="less" scoped>
.content {
  padding: 20px;
  border-top: 20px solid #f0eeee;
}
</style>
